<head>
<meta charSet="UTF-8">
<title>.....</title>
<style>
  * {
    matgin: 0;
    padding: 0;
  }

  .size {
    font-size: 100px;
  }

  .color {
    color: rgb(107, 145, 234);
  }

  .active {
    background: rgb(129, 193, 19);
  }
</style>
</head>
<!--展示模板-->
<template>
  <div id="app">
    <!--    <p v-once v-cloak>原始数据: {{name}}</p>-->
    <!--    <p>当前数据: {{name}}</p>-->
    <!--    <input type="text" v-model="msg">-->
    <!--    &lt;!&ndash;插值的方式：可以将指定的数据插入到指定的位置&ndash;&gt;-->
    <!--    <p>++{{name}}&#45;&#45;</p>-->
    <!--    &lt;!&ndash;插值的方式：不会解析HTML&ndash;&gt;-->
    <!--    <p>++{{msg}}&#45;&#45;</p>-->
    <!--    &lt;!&ndash;v-text的方式：会覆盖原有的内容&ndash;&gt;-->
    <!--    <p v-text="name">++++</p>-->
    <!--    &lt;!&ndash;v-text的方式：也不会解析HTML&ndash;&gt;-->
    <!--    <p v-text="msg">++++</p>-->
    <!--    &lt;!&ndash;v-html的方式：会覆盖原有的内容&ndash;&gt;-->
    <!--    <p v-html="name">++++</p>-->
    <!--    &lt;!&ndash;v-html的方式：会解析HTML&ndash;&gt;-->
    <!--    <p v-html="msg">++++</p>-->
    <!--    <p v-if="show">我是true</p>-->
    <!--    <p v-if="hidden">我是false</p>-->
    <!--    <p v-if="age >= 18">成年人</p>-->
    <!--    <p v-else>未成年人</p>-->
    <!--    <p v-if="score >= 90">优秀</p>-->
    <!--    <p v-else-if="score >= 80">良好</p>-->
    <!--    <p v-else-if="score >= 70">中等</p>-->
    <!--    <p v-else-if="score >= 60">及格</p>-->
    <!--    <p v-show="show">我是true</p>-->
    <!--    <p v-show="hidden">我是false</p>-->
    <!--    <p v-show="show">段落1</p>-->
    <!--    <p v-show="hidden">段落2</p>-->
    <!--    v-show的性能比v-if好-->
    <!--    <ul>-->
    <!--      <li v-for="(value, index) in list" :key="value">{{index}}&#45;&#45;{{value}}</li>-->
    <!--      <li v-for="(value, index) in 'abcdefg'" :key="value">{{index}}&#45;&#45;{{value}}</li>-->
    <!--      <li v-for="(value, index) in 4" :key="value">{{index}}&#45;&#45;{{value}}</li>-->
    <!--      <li v-for="(value, index) in obj" :key="value">{{index}}&#45;&#45;{{value}}</li>-->
    <!--    </ul>-->
    <!--    注意点：如果要给元素的属性绑定数据，那么是不能够使用插值语法的-->
    <!--    <input type="text" value="name">-->
    <!--    注意点：虽然通过v-model可以将数据绑定到input标签的value属性上，
            但是v-model是由局限性的，v-model只能用于input/textare/select
            但是在企业开发中我们还可能需要给其他标签的属性绑定数据      -->
    <!--    <input type="text" v-model="name">-->
    <!--    <input type="text" v-bind:value="name">-->
    <!--    <input type="text" :value="name">-->
    <!--&lt;!&ndash;    v-bind可以赋值，只要是合法js表达式就行&ndash;&gt;-->
    <!--    <input type="text" :value="age + 1">-->
    <!--    <p class="size color active">我是段落</p>-->
    <!--    注意点：如果需要通过v-bind给class绑定类名，不能直接赋值
            默认情况下v-bind会去model中查找数据，但是model中m没有对应的类名，所以无效，所以不能直接赋值-->
    <!--    <p :class="size">我是段落</p>-->
    <!--    注意点：如果想让v-bind去style中查找类名，那么就必须把那么就必须把类命放到数组中
            但是放到数组中之后默认还是会去model中去查找-->
    <!--    <p :class="[size]">我是段落</p>-->
    <!--    注意点：将类名放到数组中后，还需要利用引号将类名括起来才会去style中查找-->
    <!--    <p :class="['size', 'color', 'active']">我是段落</p>-->
    <!--    注意点：如果是通过v-bind来绑定我们的一个类名，那么在绑定的时候可以编写
            一个三目运算符来实现按需绑定
            格式：条件表达式 ? '需要绑定的类名' : ''-->
    <!--    <p :class="['size', 'color', flag ? 'active' : '']">我是段落</p>-->
    <!--    注意点：如果是通过v-bind来绑定我们的一个类名，那么在绑定的时候还可以通过对象来决定是否
            需要绑定
            格式：{'需要绑定的类命' : 是否绑定}-->
    <!--    <p :class="['size', 'color', {'active' : false}]">我是段落</p>-->
    <!--    注意点：如果是通过v-bind来绑定我们的一个类名，还可以使用model中的对象来替换数组-->
    <!--    <p :class="obj2">我是段落</p>-->
    <!--    最后就可以从服务端动态的获取是否绑定-->
    <!--    <p style="color: red">我是段落</p>-->
    <!--    注意点：和绑定类名一样，默认情况下v-bind会去model中查找，找不到所以没效果-->
    <!--    <p :style="color: red">我是段落</p>-->
    <!--    注意点：我们只需要将样式代码放到对象中赋值到style即可，但是取值必须用引号括起来-->
    <!--    <p :style="{color: 'red'}">我是段落</p>-->
    <!--    注意点：如果样式的名称带-，那么也必须用引号括起来-->
    <!--    <p :style="{'color': 'red', 'font-size' : '100px'}">我是段落</p>-->
    <!--    <p :style="obj3">我是段落</p>-->
    <!--    注意点：如果model中保存了多个样式的对象，想将多个对象都绑定给
            style，那么可以将多个对象放到数组中赋值给style即可-->
    <!--    <p :style="[obj3, obj4]">我是段落</p>-->
    <!--    <button onclick="alert('666')">我是按钮</button>-->
    <!--    注意点：
            1.如果是通过v-on来绑定监听事件，那么在指定事件名称的时候不需要写on
            2.如果是通过v-on来绑定监听事件，那么在赋值的时候必须赋值一个回调函数的名称-->
    <!--    <button v-on:click="myFn">我是按钮</button>-->
    <!--    <button @click="myFn">我是按钮</button>-->
    <!--    注意点：默认情况下，事件的回调函数可以反复执行，只要事件被触发就会反复执行-->
    <!--    <button v-on:click="myFn">我是按钮</button>-->
    <!--    注意点：如果想让事件监听的回调函数只执行一次，就可以用.once修饰符-->
    <!--    <button v-on:click.once="myFn">我是按钮</button>-->
    <!--    注意点：如果想组至元素的默认行为，那么可以使用prevent的修饰符-->
    <!--    <a href="http://www.it666.com" v-on:click.prevent="myFn">我是A标签</a>-->
    <!--    默认情况下在嵌套的元素中，如果都监听了相同的事件，那么会触发事件冒泡
            如果想组织事件冒泡，那么可以使用.stop修饰符-->
    <!--    <div class="a" @click="myFn1">-->
    <!--      <div class="b" @click.stop="myFn2">-->
    <!--        <div class="c" @click="myFn3"></div>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    如果想让回调只有当前元素触发事件的时候才执行，那么就可以使用.self修饰符-->
    <!--    <div class="a" @click="myFn1">-->
    <!--      <div class="b" @click.self="myFn2">-->
    <!--        <div class="c" @click="myFn3"></div>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    默认情况下是事件冒泡，如果想变成事件捕获，那么就需要使用capture修饰符-->
    <!--    <div class="a" @click.capture="myFn1">-->
    <!--      <div class="b" @click.capture="myFn2">-->
    <!--        <div class="c" @click.capture="myFn3"></div>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    <button @click="myFn('123', 45, $event)">我是按钮</button>-->
    <!--    <input type="text" @keyup.enter="myFn">-->
    <!--    <input type="text" @keyup.f2="myFn">-->
    <!--    <p v-color>我是段落</p>-->
    <!--    <input type="text" v-focus>-->
    <!--    <p v-color="'blue'">我是段落</p>-->
    <!--    <p v-color="curColor">我是段落</p>-->


    <router-view></router-view>
  </div>

</template>

<!--<div id="app2">-->
<!--  <p v-color="'red'"></p>-->
<!--</div>-->

<script src="main.js"></script>
<script>
import Vue from "vue";

Vue.config.keyCodes.f2 = 113;
/*
  directive方法接受两个参数
  第一个参数：指令的名称
  第二个参数：对象
  注意点：在自定义指令的时候，在指定指令名称的时候，不需要写v-
  注意点：指令可以在不同的生命周期阶段执行
  bind：指令被绑定到元素上的时候执行
  inserted：绑定指令的元素被添加到父元素上的时候调用

* */
Vue.directive("color", {
  // 这里的el就是被绑定指令的那个元素
  bind: function (el, obj) {
    el.style.color = "red";
    el.style.color = obj.value;
  }
});
Vue.directive("focus", {
  // 这里的el就是被绑定指令的那个元素
  inserted: function (el) {
    el.focus();
  }
});

/*第一个vue实例*/
export default {
  name: "App",
  el: "#app",
  data: function () {
    return {
      name: "123",
      msg: "<span>我是span</span>",
      show: true,
      hidden: false,
      age: 17,
      score: 88,
      list: ["张三", "李四", "王五", "赵六"],
      obj: {
        name: "对象",
        age: 33,
        gender: "男",
        class: "哈哈哈"
      },
      flag: true,
      obj2: {
        'size': true,
        'color': true,
        'active': true
      },
      obj3: {
        "color": "blue",
        'font-size': '100px'
      },
      obj4: {
        'background-color': "yellow"
      },
      gender: '男',
      curColor: 'green'
    }
  },
  methods: {
    myFn(name, age, e) {
      alert('888');
      //console.log(name, age, e);
      //console.log(this.gender)
    },
    myFn1() {
      console.log("爷爷")
    },
    myFn2() {
      console.log("爸爸")
    },
    myFn3() {
      console.log("儿子")
    }
  }
}

/*另一个vue实例*/
// let vue2 = new Vue({
//   el: '#app2',
// })

</script>
<!--样式代码-->
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

* {
  matgin: 0;
  padding: 0;
}

.size {
  font-size: 100px;
}

.color {
  color: red;
}

.active {
  background: skyblue;
}

.a {
  width: 300px;
  height: 300px;
  background: red;
}

.b {
  width: 200px;
  height: 200px;
  background: blue;
}

.c {
  width: 100px;
  height: 100px;
  background: green;
}
</style>

